<paymentForm id="paymentForm" th:fragment="paymentForm">
    <div id="paymentsForm" class="modal fade bs-large-modal-lg" keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header"><!-- modal header -->
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" >Receive Payment</h4>
                </div><!-- /modal header -->

                <!-- modal body -->
                <div class="modal-body">
                    <form class="sky-form boxed" method="post" action="#" id="payment-form">
                        <fieldset>
                            <div class="row  nomargin-top" id="customerinfo">
                                <div class="col-sm-7">
                                    <div class="form-group" >
                                        <div  class="input-group date">
                                            <input type="text" placeholder="Search Customer here.." name="searchCustomer" id="search-customer" class="form-control datepicker" />
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-search"></span>
                                    </span>
                                        </div>
                                    </div>
                                </div>
                             </div>

                            <div class="row " >

                                <div class="col-sm-7 hide" id="customerDetail">
                                    <div class="form-group" >
                                        <div  class="input-group date">
                                            <input type="hidden" name="customerId" id="customerId" />
                                            <button type="button" class="btn btn-default " id="customerDetailButton">
                                            <span type="text"  id="customer-companyName"/><br/>
                                            <span type="text"  id="customer-name"/><br/>
                                            <span type="text"  id="customer-address" /><br/>
                                            <span type="text"  id="customer-mobileNumber"/>
                                            <span class="glyphicon glyphicon-star col-xs-pull-12" style="float:right; position:absolute; margin-left:50px;margin-top:10px"></span>                                         </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <div id="paymentDateDiv" class="input-group date">
                                            <input th:value="${applicationDate}" type="text"  id="orderDate" class="form-control datepicker" />
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <!--<section>-->
                                <!--<div class="inline-group">-->
                                    <!--<label class="radio"><input type="radio" checked="" name="radio-inline" /><i></i>Credit</label>-->
                                    <!--<label class="radio"><input type="radio" name="radio-inline" /><i></i>Debit</label>-->
                                <!--</div>-->
                            <!--</section>-->

                                <div class="row">
                                    <section class="col col-md-3">
                                        <label class="input">

                                            <select name="paymentMethod">
                                                <option th:each="color : ${T(com.chandra.pos.payment.dao.entity.PaymentMethod).values()}" th:value="${color}" th:text="${color.value}" ></option>
                                            </select>
                                        </label>
                                    </section>
                                    <section class="col col-md-6">
                                    <label class="input">
                                        <i class="icon-prepend fa fa-money"></i>
                                        <input type="text" placeholder="Amount" name="paymentAmount" required="required" class="currency" />
                                    </label>
                                </section>

                            </div>


                        </fieldset>

                        <fieldset>

                            <section>
                                <label class="textarea">
                                    <i class="icon-append fa fa-pencil-square-o"></i>
                                    <textarea placeholder="Additional info" rows="3" name="comments"></textarea>
                                </label>
                            </section>
                        </fieldset>


                  </form>

                </div>
                <!-- /modal body -->

                <div class="modal-footer"><!-- modal footer -->
                    <button class="btn btn-default" data-dismiss="modal">Close</button> <button id="create-product" class="btn btn-primary">Save changes</button>
                </div><!-- /modal footer -->

            </div>
        </div>
    </div>
</paymentForm>

<billPaymentForm id="billPaymentForm" th:fragment="billPaymentForm">
    <div id="paymentsForm" class="modal fade bs-large-modal-lg" keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header"><!-- modal header -->
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">New Payment</h4>
                </div><!-- /modal header -->

                <!-- modal body -->
                <div class="modal-body">
                    <form class="sky-form boxed" method="post" action="#" id="payment-form">


                        <fieldset>

                            <div class="row  nomargin-top" id="customerinfo">

                                <div class="col-sm-7">
                                    <div class="form-group" >
                                        <div  class="input-group date">
                                            <input type="text" placeholder="Search Customer here.." name="searchCustomer" id="search-customer" class="form-control datepicker" />
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-search"></span>
                                    </span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row " >

                                <div class="col-sm-7 hide" id="customerDetail">
                                    <div class="form-group" >
                                        <div  class="input-group date">
                                            <input type="hidden" name="customerId" id="customerId" />
                                            <button type="button" class="btn btn-default " id="customerDetailButton">
                                                <span type="text"  id="customer-companyName"/><br/>
                                                <span type="text"  id="customer-name"/><br/>
                                                <span type="text"  id="customer-address" /><br/>
                                                <span type="text"  id="customer-mobileNumber"/>
                                                <span class="glyphicon glyphicon-star col-xs-pull-12" style="float:right; position:absolute; margin-left:50px;margin-top:10px"></span>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <div id="paymentDateDiv" class="input-group date">
                                            <input type="text" placeholder="Payment Date" id="orderDate" class="form-control datepicker" />
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <section>
                                <div class="inline-group">
                                    <label class="radio"><input type="radio" checked="" name="radio-inline" /><i></i>Credit</label>
                                    <label class="radio"><input type="radio" name="radio-inline" /><i></i>Debit</label>
                                </div>
                            </section>

                            <div class="row">
                                <section class="col col-md-3">
                                    <label class="input">

                                        <select name="paymentMethod">
                                            <option th:each="color : ${T(com.chandra.pos.payment.dao.entity.PaymentMethod).values()}" th:value="${color}" th:text="${color.value}" ></option>
                                        </select>
                                    </label>
                                </section>
                                <section class="col col-md-6">
                                    <label class="input">
                                        <i class="icon-prepend fa fa-user"></i>
                                        <input type="text" placeholder="Amount" name="paymentAmount" required="required" class="currency" />
                                    </label>
                                </section>

                            </div>


                        </fieldset>

                        <fieldset>

                            <section>
                                <label class="textarea">
                                    <i class="icon-append fa fa-pencil-square-o"></i>
                                    <textarea placeholder="Additional info" rows="3" name="comments"></textarea>
                                </label>
                            </section>
                        </fieldset>


                    </form>

                </div>
                <!-- /modal body -->

                <div class="modal-footer"><!-- modal footer -->
                    <button class="btn btn-default" data-dismiss="modal">Close</button> <button id="create-product" class="btn btn-primary">Save changes</button>
                </div><!-- /modal footer -->

            </div>
        </div>
    </div>
</billPaymentForm>

<searchPaymentForm id="paymentForm" th:fragment="searchPaymentForm">
    <form data-example-id="input-group-with-button" class="bs-example bs-example-form">
        <div class="row">
            <div class='col-sm-6'>
                <div class="form-group">
                    <div class='input-group'>
                        <input type='text' class="form-control datepicker" id="search-paymentId" placeholder="Payment Number" />
                    <span class="input-group-addon">
                        <span class="glyphicon "></span>
                    </span>
                    </div>
                </div>
            </div>

            <div class='col-sm-3'>
                <div class="form-group">
                    <div class='input-group'>
                        <select name="paymentMethod" id="search-paymentMethod">
                            <option value="" >ALL</option>
                            <option th:each="color : ${T(com.chandra.pos.payment.dao.entity.PaymentMethod).values()}" th:value="${color}" th:text="${color.value}" ></option>
                        </select>

                    </div>
                </div>
            </div>
            <div class='col-sm-3'>
                <div class="form-group">
                    <div class='input-group'>
                        <select  id="search-paymentStatus">
                            <option value="" >ALL</option>
                            <option th:each="color : ${T(com.chandra.pos.payment.dao.entity.PaymentStatus).values()}" th:value="${color}" th:text="${color.value}" ></option>
                        </select>

                    </div>
                </div>
            </div>

        </div>
        <div class="row">
            <div class='col-sm-6'>
                <div class="form-group">
                    <div class='input-group date datetimepicker' id='fromDateDiv'>
                        <input type='text' class="form-control datepicker" id="fromDate" placeholder="From Date" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                    </div>
                </div>
            </div>

            <div class='col-sm-6' >
                <div class="form-group">
                    <div class='input-group date datetimepicker' id='toDateDiv'>
                        <input id="toDate" type='text' class="form-control datepicker" placeholder="To Date"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                    </div>
                </div>
            </div>

        </div>

        <footer>
            <button id="search-order" class="btn btn-default " type="button"><span aria-hidden="true" class="glyphicon glyphicon-search"></span>Search</button>
            <button type="button" class="btn btn-default " data-toggle="modal" data-target="#paymentsForm"><span aria-hidden="true" class="glyphicon glyphicon-plus"></span>Receive Payment</button>
            <button type="button" class="btn btn-default " data-toggle="modal" data-target="#paymentsForm"><span aria-hidden="true" class="glyphicon glyphicon-plus"></span>Bill Payment</button>
            <button type="button" class="btn btn-default " data-toggle="modal" data-target="#paymentsForm"><span aria-hidden="true" class="glyphicon glyphicon-plus"></span>Create Credit Memo</button>

        </footer>
    </form>
</searchPaymentForm>